import React, { useEffect, useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import api from '../../axios/api'
import './List.css'
const Index = () => {
    let navigate=useNavigate()
    const [list,setlist] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const getDate=async()=>{
        const res=await api.post('/api/trip/train',{start:'北京',end:'广州'})
        const {code,data}=res.data
        if(code==200){
            setlist([...list,...data])
            console.log(res.data)
        }
    }
    useEffect(()=>{
        getDate()
    },[])
    const godetail=(id)=>{
        navigate(`/detail/${id}`)
    }
  return (
    <div>
      {
        list.map((item,index)=>(
            <div key={index} className='box' onClick={()=>godetail(item.id)}>
                <p>
                    <span>21:03</span>
                    <span>D2444</span>
                    <span>21:03</span>
                </p>
                <p>
                    <span>{item.start}</span>
                    <span>{item.startTime}</span>
                    <span>{item.end}</span>
                    <span>￥672</span>
                </p>
                <p>
                    <span>二等座：有票</span>
                    <span>一等座：有票</span>
                    <span>特等座：有票</span>
                </p>
            </div>
        ))
      }
      <InfiniteScroll loadMore={getDate} hasMore={hasMore} />
    </div>
  )
}

export default Index
